// webpack.confi.js用于配置当前项目

//动态获取当前文件的路径，需要用到Node的知识,会去Node的包里寻找
const path = require('path')

const VueLoaderPlugin = require('vue-loader/lib/plugin')

//配置在命令行使用webpack命令时默认的导出文件和目录，其中，在output中需要指定一个path,path需要使用node中的path包，这时需要进行npm install
//在package name处输入一个默认包名，后面一路enter直到创建了一个package.json文件，然后就可以直接使用webpack命令了
module.exports = {
    mode: 'development',
    entry:'./src/main.js',
    output:{
        path:path.resolve(__dirname,'dist'),
        filename:'bundle.js',
        //为了在URL前面拼接上一个Dist
        publicPath:'dist/'
    },
    module: {
        rules: [
            {
                test: /\.css$/,
                //CSS-loader只负责将CSS文件进行加载    style-loader把CSS插入到DOM中    CSS-loader和style-loader需要配合使用
                //webpack在使用多个Loader的时候，是从又向左读取的  所以需要把css-loader放在右边
                use: ['style-loader',"css-loader"],
            },
            {
                test: /\.less$/i,
                use: [ // compiles Less to CSS
                    "style-loader",
                    "css-loader",
                    "less-loader",
                ],
            },
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        options: {
                            //当加载的图片小于limit时，会将图片编译转换成BASE64的格式 npm install url-loader --save-dev
                            //当加载的图片大于limit时，需要使用file-loader进行加载  npm install file-loader --save-dev
                            limit: 8000,
                            //name配置打包时将图片打包到哪里，[name]指定打包好的文件的名字，使用点来拼接，[hash:8]表示取hash值得8位，[ext]表示拓展名
                            //在name配置中，[]中间代表一个变量，可以获取原来文件的信息，并传过来
                            name:'img/[name].[hash:8].[ext]'
                        },
                    },
                ],
            },
            {
                test: /\.m?js$/,
                // exclude：排除
                // include: 包含
                exclude: /(node_modules|bower_components)/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
            {
                test: /\.vue$/,
                use: ['vue-loader']
            }
        ],
    },
    resolve:{
    //    alias:别名
    //    下面两行用于将Vue的运行时环境由不能编译template的vue.runtime.js切换到可以编译template的vue.esm.js
        alias:{
            'vue$':'vue/dist/vue.esm.js'
        },
        extensions:['.js','.vue','.css']
    },
    plugins:[
        new VueLoaderPlugin()
    ]
}